<template>
    <Mapbox :mapOnLoadCB="mapOnLoadCB"></Mapbox>
    <button id='fly'>Fly</button>
</template>

<script>
import {ref} from "vue"
import Mapbox from "@/components/common/Mapbox.component.vue"

export default {
    name: "MapFly.component",
    components: {Mapbox},
    setup() {

        let mapStore = ref({});
        let mapOnLoadCB = (map) => {
            mapStore.value = map;

            // 调整 flyTo的 flyOptions 参数以实现效果。
            document.getElementById('fly').addEventListener('click', function () {

                map.flyTo({
                    // These options control the ending camera position: centered at
                    // the target, at zoom level 9, and north up.
                    center: [106 + (Math.random() - 0.5) * 10, 29 + (Math.random() - 0.5) * 10],
                    zoom: 9,
                    bearing: 0,

                    // These options control the flight curve, making it move
                    // slowly and zoom out almost completely before starting
                    // to pan.
                    speed: 0.5, // make the flying slow
                    curve: 1, // change the speed at which it zooms out

                    // This can be any easing function: it takes a number between
                    // 0 and 1 and returns another number between 0 and 1.
                    easing: function (t) {
                        return t;
                    }
                });
            });
        };

        return {
            mapOnLoadCB
        }
    }
}
</script>

<style scoped lang="scss">
#fly {
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 10px;
    width: 20%;
    height: 40px;
    padding: 10px;
    border: none;
    border-radius: 3px;
    font-size: 12px;
    text-align: center;
    color: #fff;
    background: #ee8a65;
    cursor: pointer;
}
</style>